<template>
	<div class="md_field" :class="{md_field_hasIcon: !!icon, md_field_isError: isError}">
		<van-icon v-if="icon" :name="icon" class="md_feld_icon"/>
		<div class="md_field_control">
			<input
					:type="type"
					v-on="listeners"
					v-bind="$attrs"
					:value="value">
		</div>
		<div>
			<slot name="rightIcon">
				<van-icon :name="rightIcon" @click="rightClick" v-show="value"/>
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'md-field',

		props: {
			value: {},
			type: {
				type: String,
				default: 'text'
			},
			rightIcon: String,
			icon: String,
			isError: Boolean
		},
		computed: {
			listeners() {
				return {
					...this.$listeners,
					input: this.onInput
				};
			}
		},

		methods: {
			onInput(event) {
				this.$emit('input', event.target.value);
			},
			rightClick(event) {
				this.$emit('right-click', event);
			}
		}
	};
</script>


<style lang="scss" scoped>
	.md_field {
		position: relative;
		border: 1px solid $border-color;
		border-radius: 5px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		display: table;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;

		> div {
			display: table-cell;
		}

		> .md_field_control {
			padding-right: 10px;
			box-sizing: border-box;

			input {
				border: 0;
				line-height: 14px;
				font-size: 14px;
				width: 100%;
			}
		}

		.md_feld_icon {
			position: absolute;
			top: 50%;
			left: 10px;
			transform: translate(0, -50%);
		}
	}

	.md_field_hasIcon {
		padding-left: 40px;
	}

	.md_field_isError {
		color: $red;
		background-color: #fcf5f5;
		border: 1px solid $red;

		input {
			color: $red;
			background-color: #fcf5f5;
		}

		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0 1000px #fcf5f5 inset !important;
		}
	}
</style>
